<!DOCTYPE html>
<html style="height: 100%;">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>沙盘图纸</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css" rel="stylesheet">      
    <link href="css/style.css" rel="stylesheet">
</head>
<style>
	.table{empty-cells:show;border-collapse:collapse;border-spacing:0;float: left;}
</style>
	<body style="background: #fff;overflow: scroll;position:relative;"> 				
		<div class="tuzhi-content" id="app">
			<img src="img/diantie_01.jpg"/>
			<div class="tuzhione">
				<div class="tuzhisec-box">
					<div class="clearfix">											
						<div class="box-list fl">
							<p>Target user group</br>目标用户群体</p>
							<textarea name="" v-on:blur="post" v-model="data.Target" rows="" cols=""></textarea>
						</div>
						<div class="box-list fr">
							<p>User core demands</br>用户核心诉求</p>
							<textarea name="" v-on:blur="post" v-model="data.User" rows="" cols=""></textarea>						
						</div>	
					</div>
					<div class="box-lists">
						<p>Product / Service </br>产品/服务</p>
						<textarea name="" v-on:blur="post" v-model="data.Product" rows="" cols=""></textarea>							
					</div>
					<div class="clearfix">											
						<div class="box-list fl">
							<p>Details of the market attribution</br>细节市场归属</p>
							<textarea name="" v-on:blur="post" v-model="data.Details" rows="" cols=""></textarea>
						</div>
						<div class="box-list fr">
							<p>Lrreplaceable user value</br>不可代替的用户价值</p>
							<textarea name="" v-on:blur="post" v-model="data.Lrreplaceable" rows="" cols=""></textarea>						
						</div>	
					</div>	
					<div class="clearfix" style="margin-top: 20px;">											
						<div class="box-list fl">
							<p>Competitor</br>竞争对手</p>
							<textarea name="" v-on:blur="post"  v-model="data.Competitor" rows="" cols=""></textarea>
						</div>
						<div class="box-list fr">
							<p>Differentiated competitive advantage</br>差异化竞争优势</p>
							<textarea name="" v-on:blur="post" v-model="data.Differentiated" rows="" cols=""></textarea>						
						</div>	
					</div>						
				</div>
			</div>	
			<img src="img/dianties_03.jpg" style="margin-top: 55px;"/>
		</div>
	</body>
    <script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
	<script src="../js/all.js" type="text/javascript" charset="utf-8"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>	
	<script>
		var model= new Vue({
			el:'#app',
			data:{
			use:ComFunJS.getQueryString('use'),			
			teamId:ComFunJS.getQueryString('teamId'),			
				
				data:{
					Target:"",
					User:"",
					Product:"",
					Details:"",
					Lrreplaceable:"",
					Competitor:"",
					Differentiated:""
				},				
			},
			methods:{
				getlocation:function(){
					if(localStorage.getItem('yanjiang')!=''){
											model.data=JSON.parse(localStorage.getItem('yanjiang'))
					}
				},
				post:function(){
					localStorage.setItem('yanjiang',JSON.stringify(model.data))
				},
	            initWebSocket(teamId){ //初始化weosocket
	                //ws地址
	                const wsuri = ComFunJS.WEBSORCTAPIURL("/webSocketServer/"+this.teamId) ;
	                this.websock = new WebSocket(wsuri);
	                this.websock.onmessage = this.websocketonmessage;
	                this.websock.onclose = this.websocketclose;
	            },
	            websocketonmessage(e){ //数据接收
	            	var _this=this;
					if(e!=undefined){
		            	var redata =JSON.parse(e.data);
						model.data=JSON.parse(redata.teamdraw.content);						
					}
	            },
	            websocketclose(e){  //关闭
	                console.log("connection closed (" + e.code + ")");
	            }							
			},
			mounted:function(){
				this.$nextTick(function(){
					if(model.use==0){
						model.getlocation();
						this.initWebSocket();
						this.websocketonmessage()
						$('input').attr('readonly','')
						$('textarea').attr('readonly','')							
					}						
				})
			}			
		})

	</script>
</html>
